<!--
 * @Author: your name
 * @Date: 2021-12-13 16:30:28
 * @LastEditTime: 2021-12-15 08:54:38
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day6vue\my-app\src\views\Add.vue
-->
<template>
  <div class="add">
    <Header value="新增发票抬头" save="保存"></Header>
    <!-- <input type="text" v-model="name" > -->
    <Vcure name="抬头类型">
      <div class="typeheader">
        <span
          v-for="(item, index) in typeName"
          :key="index"
          :class="{ active: form.ind === index }"
          @click="changeind(index)"
          >{{ item }}</span
        >
      </div>
    </Vcure>
    <Vcure name="抬头名称">
      <Vinput v-model="form.name" place="必填,公司名称"></Vinput>
    </Vcure>
    <Vcure name="税号" v-if="form.ind !== 2">
      <Vinput v-model="form.duty" place="纳税人识别号"></Vinput>
    </Vcure>
    <Vcure name="邮箱">
      <Vinput v-model="form.email" place="请填写常用邮箱(选填)"></Vinput>
    </Vcure>
    <Vcure name="专用发票" v-if="form.ind !== 2">
      <Vswitch name="invoice" v-model="form.isinvoice"></Vswitch>
    </Vcure>
    <Vcure name="是否默认">
      <Vswitch name="default" v-model="form.isdefault"></Vswitch>
    </Vcure>
    <button v-if="this.activeId" class="submit" @click="delList">
      删除
    </button>
    <button @click="submit" class="submit">提交</button>
  </div>
</template>

<script>
// @ is an alias to /src
// import Vinput from "../components/Vinput.vue";
// import Vcure from "../components/Vcure";
// import Vswitch from "../components/Vswitch";
// import Header from "../components/Header.vue";

import axios from "axios";
import {editinvoice,defaultinvoice,deleteinvoice,eeinvoice,addinvoice} from "../api/axios"

export default {
  // components: {
  //   Vinput,
  //   Vcure,
  //   Vswitch,
  //   Header,
  // },
  data() {
    return {
      typeName: ["企业", "非企业性单位", "个人"],
      activeId: null,
      form: {
        name: "",
        duty: "",
        email: "",
        ind: 0,
        isinvoice: 0,
        isdefault: 0,
        id: null,
      },
    };
  },
  // 编辑页面接受id
  async created() {
    let { id } = this.$route.query;
    // console.log(id);
    if (id) {
      this.activeId = id;
      // let res = await axios.get("/api/invoice/" + id);
      let res = await editinvoice(id)
      // console.log(res.data); 回显数据
      this.form = res.data;
    }
  },
  methods: {
    //点击提交
    async submit() {
      // 默认状态
      if (this.form.isdefault) {
        // let item = await axios.get("/api/invoice?isdefault=1");
        let item = await defaultinvoice();
        console.log(item);
        // 获取到数据了默认的数据  
        item.data.length>0&&await axios.put("/api/invoice/"+item.data[0].id,{
          ...item.data[0],
          isdefault:0
        })
      }
      let res;
      // console.log(this.activeId);
      // 判断是否有id,有id是编辑,没有则是添加
      if (this.form.name) {
        if (this.activeId) {  //编辑
          console.log(this.activeId);
          // res = await axios.put("/api/invoice/" + this.activeId, this.form);
          res = await eeinvoice({id:this.activeId,...this.form})
        } else { //添加
          // res = await axios.post("/api/invoice", this.form);
          res = await addinvoice(this.form)
        }
        if (res.status == 200 || res.status == 201) {
          this.$router.push({
            path: "/list",
          });
        }
      } else {
        alert("请填写");
      }
    },
    // 点击删除
    async delList(){
      // let res=await axios.delete("/api/invoice/"+this.activeId)
      let res=await deleteinvoice(this.activeId)
       if (res.status == 200 || res.status == 201) {
          this.$router.push({
            path: "/list",
          });
      }
    },
    changeind(index) {
      this.form.ind = index;
    },
    // v-model
    // changeInput(e){
    //   console.log(e.target.value);
    //   console.log(this.name);
    //   this.name=e.target.value
    // }
  },
};
</script>

<style scoped lang="scss">
.add {
  width: 100%;
  height: 100%;
  .submit {
    width: 90%;
    height: 40px;
    margin: 10px 15px;
    border: none;
  }
}
.typeheader {
  span {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 0px 5px;
  }
  .active {
    border: 1px solid red;
  }
}
</style>
